<template>
  <section>
    <el-table :data="orderItemsForm" show-summary  :summary-method="getSummary">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="商品名" prop="title"  width="130"/>
      <el-table-column label="规格" prop="props"  width="130"/>
      <el-table-column label="单价" prop="price" width="80">
        <template slot-scope="scope">
          <div class="price-box">
            <span class="pay-fee" style="color:red">¥{{scope.row.sale.toFixed(2)}}</span>
            <span class="price" style="text-decoration: line-through">¥{{scope.row.price.toFixed(2)}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="编码" prop="sn" width="150"/>
      <el-table-column label="数量" width="150">
        <template slot-scope="scope">
          <el-row class="numBox">
            <el-col :span="3"  >
              <i  class="el-icon-plus" size="mini" @click='increase(scope.row)' ></i>
            </el-col>
            <el-col :span="3" class="num" style="text-align: center">
              {{scope.row.num}}
            </el-col>
            <el-col :span="3"   >
              <i class="el-icon-minus" size="mini" @click='decrease(scope.row)'></i>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="价格" prop='sale'>
        <template slot-scope="scope">
          ¥{{(scope.row.sale*scope.row.num).toFixed(2)}}
          <!--¥{{scope.row.totalPrices}}-->
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-if="scope.row.data.needCustomerId">
            <div v-if="customerInMemberList.length<=0">
              请选择账户以获取用户
            </div>
            <div v-for="(customerId,index) in scope.row.customerIds" :key="customerId.id" v-else>
              <el-select v-model="scope.row.customerIds[index]" value-key="id" size="mini">
                <el-option v-for="(customer,index) in customerInMemberList" :key="index" :label="customer.name" :value="customer.id">
                  <span style="float: left">{{ customer.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ customer.phone }}</span>
                </el-option>
              </el-select>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import { mapActions,mapGetters} from 'vuex'
  import DateFormat from '@/common/date-formater'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "orderItems",
    props:['orderItemsForm','customerInMemberList','orderForm'],
    data(){
      return{
        orderPrice:0
      }
    },
    watch:{
      orderItemsForm(nv,ov){
        console.log('看下新订单项们----------',nv)
        if(nv) this.getOrderPrices(nv)
      },
      customerInMemberList(nv,ov){
        console.log('看下可选的用户----------',nv)
      }
    },
    created(){
      console.log('看下新订单项们----------',this.orderItemsForm)
      console.log('看下可选的用户----------',this.customerInMemberList)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getSummary(param){
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          if(index === 6){
            const values = data.map(item => Number(item[column.property]*item['num']))
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index]=sums[index].toFixed(2)
            sums[index]+= ' 元'
          }else if(index === 5){
            const values = data.map(item => Number(item['num']))
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index]+= ' 件'
          }else {
            sums[index]=''
          }
        })
        return sums
      },
      increase(row){//增加数量
        row.num +=1
        row.customerIds.push('')
        this.getOrderPrices(this.orderItemsForm)
      },
      decrease(row){//减少数量
        console.log('减量-----',row)
        if(row.num <=1){
          let index = this.orderItemsForm.findIndex(o => o.skuId === row.skuId )
          if(index >=0){
            this.orderItemsForm.splice(index,1)
          }
        }else {
          row.num -=1
          row.customerIds.splice(row.customerIds.length-1,1)
        }
        this.getOrderPrices(this.orderItemsForm)
      },
      getOrderPrices(items){
        let price=0
        items.forEach(item=>{
          let itemPrice=(item.num*item.sale).toFixed(2)*1
          price +=itemPrice
        })
        // if(this.orderForm.totalPrice === undefined){
        //   Vue.set(this.orderForm,'totalPrice',price)
        //   return
        // }
        this.orderForm.totalPrice=price
      }
    }
  }
</script>

<style scoped>
  .price-box{
    display: flex;
    flex-direction: column;
  }
  .pay-fee{
    font-weight: bold;
  }
</style>
